<template>
  <div class="boxs">
    <div class="title">User statistics</div>
    <div class="yhzc"><div id="yhzc"></div></div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, watch, ref } from "vue";
import themstore from "@/store/themctel/index";
import { getorderdata } from "@/api/index";
const usethemstore = themstore();
import * as echarts from "echarts";
const themcolor = ref<string>();
const themcolor2 = ref<string>();
const themcolor3 = ref<string>();
const dataaa = ref();
watch(
  () => usethemstore.chagethem,
  () => {
    setcharts();
  }
);
onMounted(() => {
  setcharts();
  getorderdatas();
});
const getorderdatas = async () => {
  const rudata = await getorderdata();
  if (rudata.code == 200) {
    const newdata = rudata.data.map((i) => {
      return new Date(i.createdAt).getMonth() + 1;
    });
    const showdata = new Array(12).fill(0);
    newdata.forEach((i) => {
      showdata[i - 1]++;
    });
    dataaa.value = showdata;
    setcharts();
  }
};
const setcharts = () => {
  themcolor.value = getComputedStyle(document.documentElement).getPropertyValue(
    "--them-color"
  );
  themcolor2.value = getComputedStyle(
    document.documentElement
  ).getPropertyValue("--them-color2");
  themcolor3.value = getComputedStyle(
    document.documentElement
  ).getPropertyValue("--them-color3");
  const doms: HTMLDivElement = document.querySelector(
    "#yhzc"
  ) as HTMLDivElement;
  const aa = echarts.init(doms);
  let option;

  option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    grid: {
      top: "13%",
      right: "5%",
      left: "6%",
      bottom: "13%",
    },

    xAxis: [
      {
        type: "category",
        axisLabel: {
          color: "#fff",
          interval: 0,
          fontSize: 12,
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: themcolor3.value,
          },
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: false,
          lineStyle: {
            color: "#195384",
            type: "dotted",
          },
        },
        data: [
          "Jan",
          "Feb",
          "Mar",
          "Apr",
          "May",
          "Jun",
          "Jul",
          "Aug",
          "Sep",
          "Oct",
          "Nov",
          "Dec",
        ],
      },
    ],
    yAxis: [
      {
        type: "value",
        name: "",
        min: 0,
        max: "dataMax",
        nameTextStyle: {
          color: "#fff",
          fontSize: 11,
        },
        axisLine: {
          lineStyle: {
            color: themcolor3.value,
          },
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: themcolor3.value,
            type: "dotted",
          },
        },
        axisLabel: {
          formatter: "{value}",
          textStyle: {
            color: "#fff",
            fontSize: 11,
          },
        },
      },
      {
        show: false,
        type: "value",
        name: "%",
        min: 0,
        nameTextStyle: {
          color: "#fff",
          fontSize: 11,
        },
        axisLine: {
          lineStyle: {
            color: themcolor3.value,
          },
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: themcolor3.value,
            type: "dotted",
          },
        },
        axisLabel: {
          formatter: "{value}",
          textStyle: {
            color: "#fff",
            fontSize: 15,
          },
        },
      },
    ],
    series: [
      {
        name: "1",
        type: "pictorialBar",
        symbolSize: [20, 10],
        symbolOffset: [0, -6],
        symbolPosition: "end",
        z: 12,
        // "barWidth": "0",
        tooltip: {
          show: false,
        },
        color: themcolor.value,
        //线的头
        data: dataaa.value,
      },
      {
        name: "",
        type: "pictorialBar",
        symbolSize: [20, 10],
        symbolOffset: [0, 7],
        // "barWidth": "20",
        z: 12,
        tooltip: {
          show: false,
        },
        color: themcolor2.value,
        data: dataaa.value,
      },
      {
        type: "bar",
        //silent: true,
        barWidth: "20",
        barGap: "10%", // Make series be overlap
        barCateGoryGap: "10%",
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [
              {
                offset: 0,
                color: themcolor.value,
              },
              {
                offset: 1,
                color: themcolor2.value,
              },
            ]),
            opacity: 0.8,
          },
        },
        //数据
        data: dataaa.value,
      },
      {
        name: "2",
        type: "line",
        yAxisIndex: 1,
        // symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
        smooth: true,
        symbolSize: 0,
        lineStyle: {
          normal: {
            width: 8,
            color: themcolor.value, // 线条颜色
          },
        },
        itemStyle: {
          normal: {
            color: "#071c33", //拐点颜色
            borderColor: "#2db6e9", //拐点边框颜色
            borderWidth: 2, //拐点边框大小
            // label: {
            //    show: true, //开启显示
            //    color: '#fff',
            //    position: 'top', //在上方显示
            //    formatter: function (res) {
            //       if (res.value) {
            //          return res.value
            //       } else {
            //          return 0
            //       }
            //    },
            // },
          },
        },
        // symbolSize: 8,   //设定实心点的大小
        areaStyle: {
          normal: {
            //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: "#29a5d530",
                },
                {
                  offset: 0.6,
                  color: "#29a5d520",
                },
                {
                  offset: 1,
                  color: "#29a5d510",
                },
              ],
              false
            ),
          },
        },
        data: dataaa.value,
      },
    ],
  };

  aa.setOption(option);
};
</script>

<style scoped lang="scss">
.boxs {
  height: 100%;
  width: 100%;
  .title {
    height: 50px;
    font-size: 0.8vw;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #a6a8ac;
  }
  .yhzc {
    height: calc(100% - 50px);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #yhzc {
    height: 100%;
    width: 90%;
  }
}
</style>
